<template>
  <div>About</div>
  <span>页面上实现 ： {{ SageInfo }}</span>
  <br />
  <span>封装hooks实现useMapGetterToSetup ： {{ heightInfo }}---{{ Sname }}</span>
  <br />
  <span>封装useMap实现：{{ MapageInfo }}</span>
</template>

<script>
import useMapGetterToSetup from '../hooks/useMapGetterToSetup'
import useMap from '../hooks/useMap'
import { mapGetters, useStore } from 'vuex'
import { computed } from 'vue'
export default {
  setup() {
    const { ageInfo } = mapGetters(['ageInfo'])
    const SageInfo = computed(ageInfo.bind({ $store: useStore() }))
    // 自定义函数实现
    const { heightInfo } = useMapGetterToSetup(['heightInfo'])
    const { Sname } = useMapGetterToSetup({
      Sname: 'nameInfo',
    })
    const { MapageInfo } = useMap({ MapageInfo: 'ageInfo' }, mapGetters)
    return {
      SageInfo,
      heightInfo,
      Sname,
      MapageInfo,
    }
  },
}
</script>

<style lang="scss" scoped></style>
